<template>
  <div class="masking">
    <div class="right-page">
      <div>
        <el-input
          v-model="searchPlateNumber"
          style="width: 150px"
          placeholder="请输入车牌号..."
          :prefix-icon="Search"
        />
      </div>
      <div>
        <el-select
          :teleported="false"
          class="select_box"
          v-model="vehicleType"
          :placeholder="vehicleTypeData[0].value"
          style="width: 96px"
        >
          <el-option v-for="item in vehicleTypeData" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div>
        <el-select
          :teleported="false"
          class="select_box"
          v-model="parkType"
          :placeholder="parkTypeData[0].value"
          style="width: 96px"
        >
          <el-option v-for="item in parkTypeData" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div>
        <el-select
          :teleported="false"
          class="select_box"
          v-model="alarmType"
          :placeholder="alarmTypeData[0].value"
          style="width: 106px"
        >
          <el-option v-for="item in alarmTypeData" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
    </div>
  </div>
  <pictureMap :searchPlateNumber="searchPlateNumber" />
</template>

<script lang="ts" setup>
import { ref } from "vue"
import { Search } from "@element-plus/icons-vue"
import pictureMap from "./pictureMap.vue"
const searchPlateNumber = ref("")
const vehicleType = ref("")
const parkType = ref("")
const alarmType = ref("")

const vehicleTypeData = [
  {
    value: "工程车",
    label: "工程车"
  },
  {
    value: "吊车",
    label: "吊车"
  }
]
const parkTypeData = [
  {
    value: "内部车",
    label: "内部车"
  },
  {
    value: "外部车",
    label: "外部车"
  }
]
const alarmTypeData = [
  {
    value: "无计划",
    label: "无计划"
  },
  {
    value: "疑似无计划",
    label: "疑似无计划"
  },
  {
    value: "外出提醒",
    label: "外出提醒"
  }
]
</script>

<style lang="scss" scoped>
.masking {
  width: 522px;
  height: 1080px;
  background: linear-gradient(90deg, #1f252f 0%, rgba(31, 37, 47, 0) 100%);
  border-radius: 0px 0px 0px 0px;
}
.right-page {
  position: absolute;
  right: 36px;
  top: 123px;
  z-index: 9999;
  display: flex;
  align-items: center;
  width: 490px;
  justify-content: space-between;
}
.select_box {
  // 默认placeholder
  :deep .el-input__inner::placeholder {
    font-size: 14px;
    font-weight: 500;
    color: #3e534f;
  }
  // 默认框状态样式更改
  :deep .el-input__wrapper {
    height: 42px;
    background-color: rgba(13, 31, 53, 0.3) !important;
    box-shadow: 0 0 0 1px rgba(13, 31, 53, 0.3) inset !important;
    --el-select-focus-border-color: #5ac087 !important;
    --el-select-hover-border-color: #5ac087 !important;
  }
  // 修改下拉框样式-点击框focus
  :deep .is-focus .el-input__wrapper {
    box-shadow: 0 0 0 1px rgba(13, 31, 53, 0.3) inset !important;
    --el-select-focus-border-color: rgba(13, 31, 53, 0.3) !important;
    --el-select-hover-border-color: rgba(13, 31, 53, 0.3) !important;
  }
  :deep .el-select__caret {
    color: #fff !important; // 清除按钮
  }
  :deep .el-input__inner {
    color: #fff !important; // 选中字体色
  }
}
:deep .el-select__placeholder {
  color: #fff !important; // 占位符颜色
}
// 下拉框-展开样式
.el-select-dropdown__item.selected {
  // background-color: #83e818!important; // 选中
}
.el-select-dropdown__item.hover {
  background-color: rgba(52, 133, 191, 0.3) !important; // hover
}
:deep .el-dropdown-menu__item:not(.is-disabled) {
  // color: #182F23!important; // disabled
}
.el-select-dropdown__item {
  color: #fff !important; // 下拉项颜色
}
:deep .el-popper {
  background-color: #121f1b !important; // 展开下拉背景
  border: 1px solid rgba(13, 31, 53, 0.3) !important; // 展开下拉边框
  color: #fff !important; // 展开下拉字体颜色
}
:deep .el-popper .el-popper__arrow::before {
  border-top: 1px solid rgba(13, 31, 53, 0.3) !important; // 箭头按钮边框
  background-color: #121f1b !important; // 箭头按钮背景色
}

::v-deep .el-input__wrapper {
  background-color: #ffffff00;
  box-shadow: 0 0 0 1px #145686;
}
::v-deep .el-select__wrapper {
  background-color: #ffffff00;
  // border: 1px solid;
  border-image: linear-gradient(180deg, rgba(5, 51, 84, 1), rgba(20, 86, 134, 1)) 1 1;
  box-shadow: inset 0px 0px 22px 0px #3e96fd;
}
::v-deep .el-select__popper.el-popper {
  background: none;
}
::v-deep .el-popper.is-light {
  background: none;
}
::v-deep .el-select-dropdown__item.is-hovering {
  background-color: rgba(52, 133, 191, 0.3);
}
::v-deep .el-input__inner {
  color: #fff !important;
}
</style>
